<template>
  <div>
 <van-nav-bar
      title="订单"
      fixed
      placeholder
      z-index="999"
      left-arrow
      @click-left="$router.back()"
    />

<van-tabs v-model="active">
  <van-tab v-for="item in orderStatusList" :key="item.status" :title="item.text"></van-tab>

</van-tabs>



<div class="orderList">
<!-- 分页   -->

<!-- 上拉加载    暂且不表 -->

<van-card
v-for="item in orderList"
:key="item._id"
  num="2"
  price="2.00"
  desc="描述信息"
  :title="item.filmsName"
  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
/>
<!--  还不如自己写   -->




</div>


  </div>
</template>

<script>
import { Tab, Tabs ,Card } from 'vant';

export default {
  name:'order',
  components:{
      [Tab.name]:Tab,
      [Tabs.name]:Tabs,
      [Card.name]:Card
  },
  watch:{
      active(n,o){

        //   console.log(n)  // 下标

     this.$toast.loading({
            message: '加载中...',
            forbidClick: true,
            });
       
       this.orderList = [] ;//  老数据清掉

       this.getOrderList()

           


      }
  },
  data(){
      return {
          active:0,
          orderStatusList:[{
              text:'全部',
              status:0,
          },{
              text:'待付款',
              status:1,
          },{
              text:'待消费',
              status:2,
          },{
              text:'待评价',
              status:4,
          },{
              text:'取消',
              status:8,
          },{
              text:'已过期',
              status:9
          }],
          orderList:[]
      }
  },
  created(){
      
     this.getOrderList()
  },
  methods:{


      getOrderList(){

          let uni_id_token = localStorage.getItem('xl-token')
         let {active} = this;
           let status = this.orderStatusList[active].status;
          this.$http.post('/apis/order/kh/orderList',{
              uni_id_token,
              status
          })
          .then(res=>{
              console.log(res)

              this.orderList = res.data
          
          })
      }
  }

}
</script>

<style>

</style>